<template>
    <h2>模板参数</h2>
    <p>字符串参数: {{ pString }}</p>
    <p>数字类型参数: {{ pNumber }}</p>
    <p>Boolean类型: <span v-if="pBoolean"> Now you see me ! </span></p>
    <p>必填项: {{ pNumRequired }}</p>
    <div>
        数组:
        <table>
            <thead>
                <th>序号</th>
                <th>内容</th>
                <th>性别</th>
                <th>年龄</th>
            </thead>
            <tr v-for="(item, index) in pArray" :key='index'>
                <td>{{ index }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.sex == 0 ? '女' : '男' }}</td>
                <td>{{ item.age }}</td>
            </tr>
        </table>
    </div> 

</template>

<script>
export default {
    // 名称
    name: "paramsTemplate",
    // 定义参数
    props: {
        // 定义参数，并赋值
        pString: {
            type: String,
            default: "Hello World"
        },
        pNumber: Number,
        pBoolean: Boolean,
        pNumRequired: {
            type: Number,
            required: true
        },
        pArray: {
            type: Array, 
            default: function(){
                return [];
            }
        }
    },
    data(){
        return {
            count: 0            
        }
    }
        
}
</script>